<template>
  <div>
    item中的num
    <button @click="addNum">+</button>
    {{ itemNum }}
    <button @click="reduceNum">-</button>
    <br>
    order中的num
    {{ orderNum }}
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  methods: {
    addNum () {
      // this['item/add_num'](5)
      this.add_num(5)
    },
    reduceNum () {
      // this['item/reduce_num'](50)
      this.reduce_num(100)
    },
    // ...mapMutations(['item/add_num', 'item/reduce_num'])
    ...mapMutations('item', ['add_num', 'reduce_num'])
  },
  computed: {
    ...mapState({
      itemNum: state => state.item.num,
      orderNum: state => state.order.num
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
